<template>
    <div class="seal"
        :class="[status === '1' ? 'completed' : status === '2' ? 'rejected' : status === '3' ? 'back' : 'revoked']">
        <div class="star">★</div>
        <div class="star">★</div>
        <div class="star">★</div>
        <div class="star">★</div>
        <div class="star">★</div>
        <div class="star">★</div>
        <div class="star">★</div>
        <div class="star">★</div>
        <div class="seal-text">{{ status === '1' ? '审批已通过' : status === '2' ? '审批已拒绝' : status === '3' ? '审批已退回' :
            '审批已撤销' }}
        </div>
    </div>
</template>
<script setup>
const props = defineProps({
    status: String
})
</script>
<style scoped lang="less">
.seal {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    border: 3px solid;
    position: relative;
    margin: 30px;
}


.seal::before {
    content: '';
    position: absolute;
    width: 130px;
    height: 130px;
    border: 2px dashed;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.seal-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 16px;
    font-weight: bold;
    font-style: italic;
    white-space: nowrap;
}

.star {
    position: absolute;
    font-size: 14px;
    transform: translate(-50%, -50%);
}

/* 精确调整后的星星位置 */
.star:nth-child(1) {
    top: 13%;
    left: 50%;
}

/* 顶部 */
.star:nth-child(2) {
    top: 50%;
    left: 87%;
}

/* 右侧 */
.star:nth-child(3) {
    top: 87%;
    left: 50%;
}

/* 底部 */
.star:nth-child(4) {
    top: 50%;
    left: 13%;
}

/* 左侧 */
.star:nth-child(5) {
    top: 25%;
    left: 25%;
}

/* 左上 */
.star:nth-child(6) {
    top: 25%;
    left: 75%;
}

/* 右上 */
.star:nth-child(7) {
    top: 75%;
    left: 25%;
}

/* 左下 */
.star:nth-child(8) {
    top: 75%;
    left: 75%;
}

//根据不同的审批状态显示不同样式
.completed {
    border-color: #67c23a;

    .seal-text {
        color: #67c23a;
    }

    .star {
        color: #67c23a;
    }
}

.completed::before {
    border-color: #67c23a;
}

.rejected {
    border-color: #f56c6c;

    .seal-text {
        color: #f56c6c;
    }

    .star {
        color: #f56c6c;
    }
}

.rejected::before {
    border-color: #f56c6c;
}

.back {
    border-color: #e6a23c;

    .seal-text {
        color: #e6a23c;
    }

    .star {
        color: #e6a23c;
    }
}

.back::before {
    border-color: #e6a23c;
}

.revoked {
    border-color: #909399;

    .seal-text {
        color: #909399;
    }

    .star {
        color: #909399;
    }
}

.revoked::before {
    border-color: #909399;
}
</style>